import React from "react";
import {Col, Row} from "reactstrap";
import {onlyNumbersKeypress} from "../../../../helpers/utils";
import EventTabButton from "../../../../components/Buttons/EventTabButton";
import {Edit} from "./icons";

const BlockIndicatorGuarantee = props => {
    return (
        <Col md={3}>
            <div className="event-indicator-block">
                <Row>
                    <Col md={9} className="col-9">
                        <div className="event-title14">{props.title}</div>
                        {props.editStatusGuarantee &&
                        <div className="event-guarantee-edit-block">
                            <input
                                onChange={e => props.setEventInfoDataValue('guarantee', e.target.value)}
                                value={props.data}
                                className="event-content-list-item event-input-edit event-guarantee-edit"
                                onKeyPress={e=>onlyNumbersKeypress(e)}
                            />
                            <EventTabButton
                                text="Ок"
                                onClick={()=>props.eventSave(props.eventInfoData, props.eventId)}
                                classNameButton="event-guarantee-save"
                            />
                        </div>
                        }
                        {!props.editStatusGuarantee &&
                        <span className="event-title14 event-indicator-price">
                                {parseInt(props.data).toLocaleString('ru')} &#8381;
                            </span>
                        }
                        {!props.editStatusGuarantee &&
                        <span className="event-indicator-edit cursor-pointer" onClick={()=>props.setEventInfoValue('editStatusGuarantee', true)}>
                                <Edit />
                            </span>
                        }
                    </Col>
                    <Col md={3} className="text-right col-3">
                        <props.icon />
                    </Col>
                </Row>
            </div>
        </Col>
    )
};

export default BlockIndicatorGuarantee;